<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=data-transform-sort-bar
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">

    <title>6.OD客流数据分析</title>
    <link rel="stylesheet" href="../../static/css/navigationcss/reset.min.css">
    <link rel="stylesheet" href="../../static/css/navigationcss/style.css">
</head>
<body style="height: 100%; margin: 0">
<script src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="../../static/js/birthday.js"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<div class="demo">
    <p>
        <br/>
        <label>时间：</label>


        <select class="sel_year" rel="2020"></select>年
        <select class="sel_month" rel="3"></select>月
        <select class="sel_day" rel="12"></select>日
        <select class="sel_time">
            <option value="morning">早</option>
            <option value="night">晚</option>
        </select>
        <label>
            <button type="button" id="subButton">点我查询</button>
        </label>
    </p>
</div>


<div id="container" style="height: 80%"></div>

<script type="text/javascript">


    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    function ajax(year, month, day, time) {
        $.getJSON("{% url 'showFive' %}", {year: year, month: month, day: day, time: time}, function (rawData) {
            console.log("rawData is:");
            console.log(rawData);
            var list = rawData.data.map(function (entry) {
                return [entry.stationName, entry.inNum, entry.outNum];
            });
            console.log("list is:");
            console.log(list);

            option = {
                title: {
                    left: 'center',
                    text: '早晚高峰客流站点分析',
                    subtext: "时间 ： " + year + "/" + month + "/" + day + "  " + time,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                legend: {
                    right: 3,
                    data: ['IN', 'OUT'],
                },

                dataset: [{
                    dimensions: ['name', 'in', 'out'],
                    source: list
                },

                    {
                        transform: {
                            type: 'sort',
                            config: {dimension: 'in', order: 'desc'}
                        }
                    }],
                xAxis: {
                    type: 'category',
                    axisLabel: {interval: 0, rotate: 30},
                },
                yAxis: {},
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    type: 'slider',
                    xAxisIndex: 0,
                    minSpan: 5,
                    bottom: 10
                }],

                series: [{
                    name: "IN",
                    type: 'bar',
                    encode: {x: 'name', y: 'in'},
                    datasetIndex: 1
                },
                    {
                        name: "OUT",
                        type: 'bar',
                        encode: {x: 'name', y: 'out'},
                        datasetIndex: 1
                    },]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

        });
    }

    ajax(2020, 3, 18, "morning");

    $(function () {
        $.ms_DatePicker({
            YearSelector: ".sel_year",
            MonthSelector: ".sel_month",
            DaySelector: ".sel_day"
        });
        $.ms_DatePicker();
    });
    $("#subButton").click(function () {


        var year = $(".sel_year").val();
        var month = $(".sel_month").val();
        var day = $(".sel_day").val();
        var time = $(".sel_time").val();

        console.log(year, month, day, time);
        if (year === '2019') {

            if (month !== '12') {
                alert("没有该时间段的数据！");
                return;
            }
        }
        if (year === '2020') {
            if (month > 7) {
                alert("没有该时间段的数据！");
                return;
            }
        }

        ajax(year, month, day, time);

    });

</script>
</body>
</html>
